<template>
	<view class="box">
		<view class="footer color-white text-center flex">
			<view class="footerBtn w-1-2 py-10px ml-35px mr-10px rounded-50px flex flex-y flex-x-center"
				@click="showDialog">
				<view>￥<text>299.00</text></view>
				<view>我要做队长</view>
			</view>
			<view class="footerBtn w-1-2 py-10px ml-10px mr-35px rounded-50px flex flex-y flex-x-center">
				<view>我要报名</view>
			</view>
		</view>

		<uv-popup ref="popup" mode="bottom" @change="change" bgColor="none">
			<view class="leafletPopup mx-20px relative">
				<view class="w-full absolute flex flex-x-between">
					<view class="bg2"></view>
					<view class="pt-100px pl-20px flex flex-y flex-y-end">
						<view class="flex pr-30px pb-30px">
							<view>已有<text class="color-pink">{{156}}</text>小队 , </view>
							<view class="ml-10px">参加人数<text class="color-pink">143</text>人</view>
						</view>
						<view class="customer w-300px px-10px py-5px mr-2px flex flex-y-center">
							<image src="../../static/business-icon/icon-customer.svg" mode="" class="w-60px h-60px">
							</image>
							<text class="ml-10px text-24px"><text class="font-bold">美玲艺术学校</text>(客服)</text>
						</view>
					</view>
				</view>
				<view class="content h-full absolute">
					<view class="p-20px bg-white">
						<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
							<view class="w-100px text-28px text-center">姓名:</view>
							<view class="line mr-20px mt-2px"></view>
							<view class="flex-1">
								<uv-input v-model="state.userName" border="none" placeholder="请输入姓名"
									class="rounded-20px">
								</uv-input>
							</view>
						</view>

						<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
							<view class="w-100px text-28px text-center">电话:</view>
							<view class="line mr-20px mt-2px"></view>
							<view class="flex-1">
								<uv-input v-model="state.phone" border="none" placeholder="请输入电话" class="rounded-20px">
								</uv-input>
							</view>
						</view>

						<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
							<view class="w-100px text-28px text-center">年龄:</view>
							<view class="line mr-20px mt-2px"></view>
							<view class="flex-1">
								<uv-input v-model="state.age" border="none" placeholder="请输入年龄" class="rounded-20px">
								</uv-input>
							</view>
						</view>

						<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
							<view class="w-100px text-28px text-center">类型:</view>
							<view class="line mr-20px mt-2px"></view>
							<view class="flex-1">
								<uv-input v-model="state.type" readonly border="none" placeholder="请选择学生类型"
									@click="showActions(1)" suffixIcon='arrow-down' class="rounded-20px">
								</uv-input>
							</view>
						</view>

						<view class="border flex flex-y-center px-20px py-10px rounded-50px">
							<view class="w-100px text-28px text-center">科目:</view>
							<view class="line mr-20px mt-2px"></view>
							<view class="flex-1">
								<uv-input v-model="state.subject" readonly border="none" placeholder="请选择科目"
									@click="showActions(2)" suffixIcon='arrow-down' class="rounded-20px">
								</uv-input>
							</view>
						</view>

						<uv-action-sheet ref="actionsRef" :actions="state.actions"
							@select="selectAction"></uv-action-sheet>
					</view>

					<view class="mt-30px rounded-50px flex flex-x-center">
						<view class="leafletBtn w-500px h-130px leading-100px text-center text-50px" @click="submit">
							支付报名费299元
						</view>
					</view>

				</view>
			</view>
		</uv-popup>

		<uv-notify ref="notify"></uv-notify>
	</view>
</template>

<script setup name="Leaflet">
	import {
		ref,
		reactive
	} from 'vue'

	const popup = ref()
	const showDialog = () => {
		popup.value.open();
	}

	const change = () => {

	}

	const actionsRef = ref()
	const state = reactive({
		userName: '',
		phone: '',
		age: '',
		type: '',
		subject: '',
		actionIndex: 1,
		actions: [],
	})

	const showActions = (index) => {
		actionsRef.value.open();
		state.actionIndex = index
		if (index === 1) {
			state.actions = [{
					name: '新生',
					value: '0'
				},
				{
					name: '老生',
					value: '1'
				},
			]
		} else {
			state.actions = [{
					name: '中国舞3-16岁',
					value: '0'
				},
				{
					name: '美术4-16岁',
					value: '1'
				},
			]
		}
	}
	const selectAction = (e, index) => {
		if (state.actionIndex === 1) {
			state.type = e.name;
		} else {
			state.subject = e.name;
		}
	}


	const notify = ref()
	const submit = () => {
		let message = ''
		if (!state.userName) {
			notify.value.show({
				type: 'error',
				message: '请输入姓名',
				safeAreaInsetTop: true
			})
			return
		}
		if (!state.phone) {
			notify.value.show({
				type: 'error',
				message: '请输入电话号码',
				safeAreaInsetTop: true
			})
			return
		}
		if (!state.age) {
			notify.value.show({
				type: 'error',
				message: '请输入年龄',
				safeAreaInsetTop: true
			})
			return
		}
		if (!state.type) {
			notify.value.show({
				type: 'error',
				message: '请选择学生类型',
				safeAreaInsetTop: true
			})
			return
		}
		if (!state.subject) {
			notify.value.show({
				type: 'error',
				message: '请选择科目',
				safeAreaInsetTop: true
			})
			return
		}
		console.log('提交接口');
	}
</script>

<style lang="scss">
	.box {
		height: 2000px;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.footerBtn {
		background: linear-gradient(180deg, #762ee4, #5c21ea);
	}

	.leafletPopup {
		height: 500px;
		background: url(../static/leafLet/leafletBg.png) center 0px no-repeat;
		background-size: 100% 100%;
	}

	.bg2 {
		width: 250rpx;
		height: 250rpx;
		background: url(../static/leafLet/leafletBg-2.png) no-repeat;
		background-size: contain;
	}

	.content {
		width: 90%;
		top: 140px;
		left: 5.5%;
	}

	.customer {
		border-radius: 50rpx 0 0 50rpx;
		background: #ffedbe;
	}

	.line {
		width: 1px;
		height: 30rpx;
		background: #dedede;
	}

	:deep(.uv-form-item__body__left__content__label) {
		justify-content: center !important;
	}

	.border {
		border: 1px solid #e8dad2;
	}

	.leafletBtn {
		color: #d8592e;
		background: url(../static/leafLet/leaflet-btn.png) no-repeat;
		background-size: 100%;
		animation: fontMove 1s infinite forwards;
	}

	@keyframes fontMove {
		0% {
			font-size: 45rpx;
		}

		100% {
			font-size: 43rpx;
		}
	}
</style>